<template>

  <div class="in-wrap">
  
    <!-- 公共头引入 -->
 <header id="header" >
  
<nav class="navbar navbar-default navbar-fixed-top " role="navigation" style="padding:0px;">
	<div class="container-fluid"> 
    
	<div class="navbar-header" id="b">
		<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#example-navbar-collapse">
			<span class="sr-only">切换导航</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
  
		<a class="navbar-brand" href="#" style="margin-top:10px">
        <img src="../assets/tx2.gif" alt="" style="width:80px;float:left;margin-top:-10px;margin-right:10px" >棉花糖博客</a>
	</div>
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<ul class="nav navbar-nav" >
			<router-link to="/" tag="li"  exact>
              <a>首页</a>
            </router-link>
            <router-link to="/blog" tag="li" active-class="current">
              <a>博客</a>
            </router-link>
            <router-link to="/teacher" tag="li" active-class="current">
              <a>作品</a>
            </router-link>
            <router-link to="/article" tag="li" active-class="current">
              <a>资源</a>
            </router-link>
            <router-link to="/qa" tag="li" active-class="current">
              <a>成为作者</a>

            </router-link>
            
		</ul>

     <ul   class="a">
        <li v-if="!loginInfo.id" id="no-login" style="margin-top:12px">
        <a href="/login" title="登录" >
            <em class="icon18 login-icon">&nbsp;</em>
            <span class="vam ml5">登录</span>
        </a>
        |
        <a href="/register" title="注册">
            <span class="vam ml5">注册</span>
        </a>
        </li>
        <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
        <a href="/ucenter" title>
            <img
                 :src="loginInfo.avatar"
                 width="50"
                 height="50"
                 style="border-radius:50%"
                 alt
                 >
            <span id="userName" >{{ loginInfo.nickname }}</span>
        </a>
        <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
        </li>
      </ul>
    
	</div>
	</div>
</nav>
  </header>

      
    <nuxt/>

    <!-- 公共底引入 -->
   
    <!-- /公共底引入 -->
  </div>
</template>
<script>

import cookie from 'js-cookie';
export default {
   data(){
     return {
        token:'',
        loginInfo: {
          id: '',
          age: '',
          avatar: '',
          mobile: '',
          nickname: '',
          sex: ''
        }
     }

   },
   created(){
      this.showInfo()
   },
   methods:{
      showInfo(){

        var userStr = cookie.get('ucenter')
        if(userStr) {
        this.loginInfo = JSON.parse(userStr)
      }
      },
      //退出
    logout() {
      //清空cookie值
      cookie.set('usertoken','',{domain: 'localhost'})
      cookie.set('ucenter','',{domain: 'localhost'})
      //回到首页面
      window.location.href = "/";
    }
   }

};
</script>
<style>
   @media (min-width:1000px){ 
          body{
          background-image: url(../assets/background2.jpg);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-attachment: fixed;
  } 
   }
  ul{
    list-style: none;
  }
.a{
  margin-left:70%;
}
#b{
  margin-left:17%;
}
.h-r-user{
  margin-top:10px
}
#userName{
  font-size:18px;
  padding:15px 15px;
}
.nav{
  font-size:20px;
}

.nav li{
  padding: 10px;
}
 html,body{
              max-width: 100%;
              overflow-x: hidden;
            }
#footer{
  background-color: rgb(248, 248, 248);
  opacity:0.8;
}
#footer:hover{
  opacity:1.0;
}
@media (max-width:1000px){ 
        #b{
          margin-left:0;
        }
      .a{
        display:none
      }
     }
</style>